<template>
    <div class="mine-main">
        <div class="mine-header">
            <div class="avatar">
                <img src="../../assets/image/avatar.png" alt="">
                <div @click="goRouter('/login')" class="method">登录/注册</div>
            </div>
            <div class="shop-base-info">
                <div class="shop-center">
                    <div @click="goRouter('/collect')" class="item">
                        <p>0</p>
                        <div class="name">收藏店铺</div>
                    </div>
                    <div class="line"/>
                    <div @click="goRouter('/collectShop')" class="item">
                        <p>0</p>
                        <div class="name">关注店铺</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-item-with">
            <div class="card-item">
                <div class="box-top">
                    <p>账户余额(USD)
                        <img @click="isCLose=false" v-if="isCLose" src="../../assets/image/open.png" alt="">
                        <img @click="isCLose=true" v-else src="../../assets/image/close.png" alt="">
                    </p>
                    <p v-if="isCLose">500.00</p>
                    <p v-else>*****</p>
                </div>
                <div class="box-submit">
                    <a href="javascript:void (0)" @click="goRouter('/withdraw')" class="left-submiyt">提现</a>
                    <a href="javascript:void (0)" @click="goRouter('/recharge')" class="right-submiyt">充值</a>
                </div>
            </div>
        </div>
        <div class="card-box">
            <div class="box-nav">
                <div class="order-top">
                    <span>我的订单</span>
                    <span @click="goRouter('/order')">全部 <van-icon name="arrow" /></span>
                </div>
                <div class="order-nav">
                    <van-grid :border="false" column-num="5">
                        <van-grid-item @click="goRouter('/order')" icon="photo-o" text="待付款">
                            <template #icon>
                                <img class="image" src="../../assets/image/a.png" alt="">
                            </template>
                        </van-grid-item>
                        <van-grid-item @click="goRouter('/order')" icon="photo-o" text="待发货" >
                            <template #icon>
                                <img class="image" src="../../assets/image/b.png" alt="">
                            </template>
                        </van-grid-item>
                        <van-grid-item @click="goRouter('/order')" icon="photo-o" text="待收货" >
                            <template #icon>
                                <img class="image" src="../../assets/image/c.png" alt="">
                            </template>
                        </van-grid-item>
                        <van-grid-item @click="goRouter('/order')" icon="photo-o" text="待评价">
                            <template #icon>
                                <img class="image" src="../../assets/image/d.png" alt="">
                            </template>
                        </van-grid-item>
                        <van-grid-item @click="goRouter('/order')" icon="photo-o" text="退货/售后">
                            <template #icon>
                                <img class="image" src="../../assets/image/e.png" alt="">
                            </template>
                        </van-grid-item>
                    </van-grid>
                </div>
            </div>
        </div>
        <div class="card-box-nav">
        <div @click="goRouter('/merchant')" class="card-nav-list">
                <span class="nav-left">
                    <img src="../../assets/image/a1.png" alt="">商家入驻
                </span>
            <span class="icon"><van-icon name="arrow" /></span>
        </div>
    </div>
        <div v-if="false" @click="goRouter('/loan')" class="card-box-nav ">
            <div class="bgk-postions">
                <div class="card-nav-list bgk-box ">
                      <span class="nav-left">
                        <img src="../../assets/image/a2.png" alt="">贷款申请
                      </span>
                    <span class="icon"><van-icon name="arrow" /></span>
                </div>
            </div>
        </div>
        <div class="card-menu">
            <div class="list-menu">
                <div @click="goRouter('/lang')" class="van-cell-box">
                    <span>
                         <img src="../../assets/image/a3.png" alt="">
                        语言
                    </span>
                    <span>
                        简体中文
                        <van-icon name="arrow" />
                    </span>

                </div>
                <div @click="goRouter('/setting')" class="van-cell-box">
                    <span>
                         <img src="../../assets/image/a4.png" alt="">
                        设置
                    </span>
                    <span>
                        <van-icon name="arrow" />
                    </span>

                </div>
            </div>
        </div>
        <page-footer></page-footer>
    </div>
</template>

<script>
    import pageFooter from '../../components/flooter/index'
    export default {
        name: "index",
        data(){
          return{
            isCLose:false
          }
        },
        components:{pageFooter},
        methods:{
          goRouter(item){
            this.$router.push(item)
          }
        }
    }
</script>

<style scoped lang="scss">
    .mine-main{
        width: 100%;
        background: #f6f6f6;
        box-sizing: border-box;
        .mine-header{
            width: 100%;
            height: 230px;
            background: url("../../assets/image/bg.ca2cbb8b.png") no-repeat 50% 50%;
            //background-color: var(--main-color);
            color: #fff;
            background-size: cover;
            background-position: top;
            padding: 60px 0 0 0;
            box-sizing: border-box;
            .avatar{
                width: 100%;
                height: 60px;
                display: flex;
                align-items: center;
                padding: 0 0 0 3%;
                box-sizing: border-box;
                img{
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
                .method{
                    margin-left: 10px;
                    color: #fff;
                    font-size: 22px;
                    font-weight: 600;
                }
            }
            .shop-base-info{
                margin-top: 20px;
                width: 100%;
                height: 60px;
                /*background: red;*/
                display: flex;
                justify-content: center;
                .shop-center{
                    width:100%;
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .item{
                        width: 50%;
                        height: 60px;
                        font-size: 14px;
                        display: flex;
                        justify-content: center;
                        flex-wrap: wrap;
                        .name{
                            width: 100%;
                            text-align: center;
                            padding: 0 15px;
                        }
                        p{
                            font-size: 16px;
                        }
                    }
                    .line{
                        width: 1px;
                        height: 20px;
                        background: #fff;
                    }
                }
            }

        }
        .card-item-with{
            width: 100%;
            padding: 0 4%;
            margin-top: -30px;
            box-sizing: border-box;
            .card-item{
                width: 100%;
                height: 130px;
                background-color: #fff;
                box-shadow: 0 0.3125rem 0.3125rem hsla(0,0%,58%,.07);
                padding: 3%;
                box-sizing: border-box;
                .box-top{
                    width: 100%;
                    text-align: center;
                    margin-top: 5px;
                    p:nth-child(1){
                        justify-content: center;
                        font-size: 12px;
                        color: #999;
                        display: flex;
                        align-items: center;
                        img{
                            margin-left: 5px;
                            height: 10px;
                        }
                    }
                    p:nth-child(2){
                        text-align: center;
                        margin-top: 5px;
                        font-size: 24px;
                        color: #000;
                    }
                }
                .box-submit{
                    width: 100%;
                    height: 40px;
                    display: flex;
                    margin-top: 10px;
                    justify-content: space-around;
                    align-items: center;
                    a{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 13px;
                        border-radius: 5px;
                    }
                    .left-submiyt{
                        width: 120px;
                        height: 32px;
                        box-sizing: border-box;
                        border: 1px solid #333;
                        color: #333;
                    }
                    .right-submiyt{
                        width: 120px;
                        height: 32px;
                        background: #002FFF;
                        color: #fff;
                    }
                }
            }
        }
        .card-box{
            width: 100%;

            padding: 4%;
            box-sizing: border-box;
            .box-nav{
                width: 100%;
                height: 100px;
                background-color: #fff;
                box-shadow: 0 0.3125rem 0.3125rem hsla(0,0%,58%,.07);
                box-sizing: border-box;
                .order-top{
                    padding: 3%;
                    width: 100%;
                    height: 30px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    span:nth-child(1){
                        font-size: 14px;
                        color: #333;
                    }
                    span{
                        font-size: 12px;
                        color: #999;
                    }
                }
                .order-nav{
                    width: 100%;

                    .image{
                        height: 20px;
                    }
                }
            }
        }
        .card-box-nav{
            width: 100%;
            padding: 0 4%;
            box-sizing: border-box;
            height: 60px;
            margin-bottom: 10px;
            margin-top: 20px;
            .bgk-postions{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 60px;
                box-sizing: border-box;
                background: rgba(0,0,0,0.8);
                /*padding: 0 2%;*/
                padding: 0 0 0 2%;
                .bgk-box{
                    background: url("../../assets/image/loan-bg.63c1e911.png") !important ;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: top center;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .nav-left{
                        font-size: 15px;
                        img{
                            margin-right: 10px;
                            height: 24px;
                        }
                    }
                }
            }
            .card-nav-list{
                width: 100%;
                height: 45px;
                background: #002FFF;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 2%;

                box-sizing: border-box;
                .nav-left{
                    font-size: 16px;

                    color: #fff;
                    display: flex;
                    align-items: center;

                    img{
                        height: 40px;
                    }
                }
                .icon{
                    color: #fff;
                    font-size: 12px;
                }

            }
        }
        .card-menu{
            width: 100%;
            padding: 0 4%;
            box-sizing: border-box;
            .list-menu{
                width: 100%;
                background: #fff;

                .van-cell-box{
                    width: 100%;
                    height: 45px;
                    padding: 0 3%;
                    box-sizing: border-box;
                    border-bottom: 1px solid #f6f6f6;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 14px;
                    span{
                        display: flex;
                        align-items: center;
                        height: 45px;

                        img{
                            margin-right: 8px;
                            height: 18px;
                        }
                    }
                }
            }
        }
    }

</style>
